var peopleNumberData = [600, 720, 510, 400, 720, 510, 400, 400, 720, 510, 400, 300],
    dataX = ['市中区', '任城区', '金乡县', '嘉祥县', '汶上县', '泗水县', '梁山县', '曲阜市', '兖州区', '高新区', '太白新区', '济宁经济技术开发区'];
peopleNumber("demo01", peopleNumberData, dataX);

function peopleNumber(element, data, dataX) {
    var myChart = echarts.init(document.getElementById(element));
    option = {
        grid: {
            left: '0%',
            right: '3%',
            bottom: '0%',
            top: '5%',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            padding: 10,
            backgroundColor: 'rgba(0, 0, 0, .8)',
        },
        // dataZoom: [ //给x轴设置滚动条  
        //     {
        //         start: 0, //默认为0  
        //         end: 70,
        //         type: 'slider',
        //         show: true,
        //         xAxisIndex: [0],
        //         handleSize: 0, //滑动条的 左右2个滑动条的大小  
        //         height: 8, //组件高度  
        //         left: 50, //左边的距离  
        //         right: 40, //右边的距离  
        //         bottom: 26, //右边的距离  
        //         handleColor: '#ddd', //h滑动图标的颜色  
        //         handleStyle: {
        //             borderColor: "#cacaca",
        //             borderWidth: "1",
        //             shadowBlur: 2,
        //             background: "#ddd",
        //             shadowColor: "#ddd",
        //         },

        //     },
        // ],
        xAxis: {
            axisLabel: {
                // rotate:45,
                textStyle: {
                    color: 'rgba(0,0,0)',
                    fontSize: 12,
                },
                formatter: function(value, index) {
                    return value.replace(/(.{4})/g, '$1\n');
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            data: dataX,
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0,0,0)'
                },
            },
            axisLabel: {
                textStyle: {
                    color: 'rgba(0,0,0,0.65)',
                    fonSize: 12
                }
            },
        },
        series: [{
            type: 'bar',
            name: '人口',
            // barWidth: 30,
            itemStyle: {
                normal: {
                    color: '#1890FF',
                }
            },
            label: { //图形上的文本标签
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#000',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 13,
                    },
                },
            },
            data: data,
        }, ]
    };
    myChart.setOption(option);
    tools.loopShowTooltip(myChart, option, { loopSeries: true, interval: 3000, });
}


let demo02Data = [
        [320, 302, 301, 100, 200, 50, 40],
        [120, 132, 101, 100, 20, 200, 400],
    ],
    dataY = ['东坡区', '彭山区', '仁寿区', '李龙', 'ya', '圣楠', '洁'];
demo02('demo02', demo02Data, dataY);

function demo02(el, data, dataY) {
    let end = 0;
    if (dataY.length < 4) {
        end = dataY.length - 1;
    } else {
        end = 3;
    }

    let result = [];
    for (let key in data) {
        //遍历数组的每一项
        data[key].forEach((value, index) => {
            if (isBlank(result[index])) {
                result[index] = 0;
            }
            result[index] += value;
        })
    }
    //判断值是否存在函数
    function isBlank(val) {
        if (val == null || val == "") {
            return true;
        }
    }

    let Charts = echarts.init(document.getElementById(el));
    let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['在管', '在外'],
            icon: "roundRect",
            textStyle: {
                color: ['#b2e2ff'],
                fontSize: 14,
                fontWeight: 'bold'
            }
        },
        grid: {
            top: '10%',
            left: '1%',
            right: '4%',
            bottom: '1%',
            containLabel: true
        },
        dataZoom: [{ 
            yAxisIndex: 0,
            show: false,
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: end    // 一次性展示五个。
                       
        },     ],
        xAxis: {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(178,226,255,0.5)', // 颜色
                }
            },
            axisLabel: {
                show: false,
                fontSize: 14,
                color: 'rgba(178,226,255,1)',
                fontWeight: 'bold'
            },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'category',
            data: dataY,
            axisLabel: {

                fontSize: 16,
                color: 'rgba(178,226,255,1)',
                fontWeight: 'bold'
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(178,226,255,0.5)', // 颜色
                }
            },
        },
        series: [{
                name: '在管',
                type: 'bar',
                stack: '总量',
                barWidth: 25,
                itemStyle: {
                    normal: {
                        color: '#37A2DA',
                    }
                },
                z: 10,
                data: data[0]
            },
            {
                name: '在外',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        color: '#FFDB5C',
                    }
                },
                data: data[1]
            },
            {
                type: 'bar',
                name: '总数',
                barGap: '-100%',
                barWidth: 25,
                itemStyle: {
                    normal: {
                        color: 'rgba(255, 255, 255, 0)',
                    }
                },
                z: -10,
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        color: 'rgba(191,228,255,1)',
                        fontSize: 14,
                        padding: [0, 0, 0, 20],
                        formatter: '{c}人',
                        fontWeight: 'bold'
                    }
                },
                data: result,
            },
        ]
    };
    Charts.setOption(option);
    let setTime = setInterval(function() {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue == dataY.length - 1) {
            option.dataZoom[0].endValue = end;
            option.dataZoom[0].startValue = 0;
        } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        Charts.setOption(option);
    }, 3000);
};
var demo03Data = [600, 720, 510, 400, 720, 510, 400, 400, 720, 510, 400, 300],
    dataXX = ['市中区', '任城区', '金乡县', '嘉祥县', '汶上县', '泗水县', '梁山县', '曲阜市', '兖州区', '高新区', '太白新区', '济宁经济技术开发区'];
demo03('demo03', dataXX, demo03Data);

function demo03(element, dataX, data) {
    let end = 0;
    if (dataX.length < 5) {
        end = dataX.length - 1;
    } else {
        end = 4;
    }
    var myChart = echarts.init(document.getElementById(element));
    let option = {
        grid: {
            left: '0%',
            right: '3%',
            bottom: '0%',
            top: '5%',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            padding: 10,
            backgroundColor: 'rgba(0, 0, 0, .8)',
        },
        dataZoom: [{ 
            // yAxisIndex: 0,
            show: false,
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: end    // 一次性展示五个。
                       
        },     ],
        xAxis: {
            axisLabel: {
                // rotate:45,
                textStyle: {
                    color: 'rgba(0,0,0)',
                    fontSize: 12,
                },
                formatter: function(value, index) {
                    return value.replace(/(.{4})/g, '$1\n');
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            data: dataX,
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0,0,0)'
                },
            },
            axisLabel: {
                textStyle: {
                    color: 'rgba(0,0,0,0.65)',
                    fonSize: 12
                }
            },
        },
        series: [{
            type: 'bar',
            name: '人口',
            // barWidth: 30,
            itemStyle: {
                normal: {
                    color: '#1890FF',
                }
            },
            label: { //图形上的文本标签
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#000',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 13,
                    },
                },
            },
            data: data,
        }, ]
    };
    myChart.setOption(option);
    setInterval(function() {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue == dataX.length - 1) {
            option.dataZoom[0].endValue = end;
            option.dataZoom[0].startValue = 0;
        } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option);


    }, 3000);
}